import img1 from './images/01.jpeg';
import img2 from './images/02.jpeg';
import img3 from './images/03.jpeg';
import img4 from './images/04.jpeg';
import './css/index.css';
const listArr = [img1, img2, img3, img4];

// 轮播图类
function Banner(container, box, circleBox, $num = 4) {
  // 需要使用轮播图的容器
  this.box = document.querySelector(box);
  // 需要使用轮播图的小圆点的容器
  this.circleBox = document.querySelector(circleBox);
  // 整个容器
  this.container = document.querySelector(container);
  // 左右箭头
  this.leftArrow = document.querySelector('.left');
  this.rightArrow = document.querySelector('.right');
  // 初始值
  this.num = $num;
  // 初始轮播图索引
  this.currentIndex = 0;
  // 上次的索引
  this.lastIndex = 0;
  // 自动轮播图的定时器
  this.timer = null;
}

// 初始化轮播图
Banner.prototype.init = function () {
  // 初始设置第一张背景图
  this.box.style.backgroundImage = `url('${listArr[this.currentIndex]}')`;
  // 设置小圆点
  for (let i = 0; i < this.num; i++) {
    let div = document.createElement('div');
    div.classList.add('circle');
    this.circleBox.appendChild(div);
  }
  // 初始设置第一个小圆点
  this.circleBox.children[this.currentIndex].classList.add('active');
  // 挂载点击事件
  this.clickEvent();
  // 挂载自动轮播
  this.autoPlay();
  // 挂载鼠标进出方法
  mouseEvent.call(this);
};

// 轮播图左右和小圆点的点击事件
Banner.prototype.clickEvent = function () {
  // 点击左箭头事件
  this.leftArrow.addEventListener('click', () => {
    if (this.currentIndex === 0) {
      this.currentIndex = this.num - 1;
    } else {
      this.currentIndex--;
    }
    updateImg.call(this);
  });

  // 点击右箭头
  this.rightArrow.addEventListener('click', () => {
    next.call(this);
  });

  // 点击小圆点
  this.circleBox.addEventListener('click', (e) => {
    // 当前元素
    let target = e.target;
    // 所有子元素
    const childrenArr = [...this.circleBox.children];
    // 选中的子元素索引
    this.currentIndex = childrenArr.indexOf(target);
    updateImg.call(this);
  });
};

// 下一张方法
function next() {
  if (this.currentIndex === this.num - 1) {
    this.currentIndex = 0;
  } else {
    this.currentIndex++;
  }
  updateImg.call(this);
}

// 自动轮播
Banner.prototype.autoPlay = function () {
  this.timer = setInterval(() => {
    next.call(this);
  }, 2000);
};

// 轮播图和小圆点切换方法
function updateImg() {
  // 轮播图切换
  this.box.style.backgroundImage = `url('${listArr[this.currentIndex]}')`;
  // 小圆点切换
  this.circleBox.children[this.lastIndex].classList.remove('active');
  this.circleBox.children[this.currentIndex].classList.add('active');
  this.lastIndex = this.currentIndex;
}

// 鼠标进出容器区域停止和启动自动轮播图
function mouseEvent() {
  // 进入容器区域鼠标进出停止和启动轮播图
  this.container.addEventListener('mouseenter', () => {
    console.log('进来');
    clearInterval(this.timer);
  });
  this.container.addEventListener('mouseleave', () => {
    console.log('出来');
    this.autoPlay();
  });
}

const b1 = new Banner('.container', '.box', '.box-1', 4);
b1.init();
